<template>
<!-- 选项切换按钮 -->
<view 
    v-for="value,key in tabOptions"
    @click="switchTab(key as string)"
    :class="tabChecked[key as string]?'button-click':'button-default'"
>
    {{value}}
</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
//设置选项内容
interface TabOption{
    [index:string]:string
}
const tabOptions:TabOption={
    MainDishes:'煲',
    SideDishes:'加菜区',
    Drinks:'饮料',
    History:'历史订单'
};
//初始化按钮选中状态
interface tabChecked{
    [index:string]:boolean
}
const tabChecked=ref<tabChecked>({
    MainDishes:true,
    SideDishes:false,
    Drinks:false,
    History:false
});
//声明切换选项卡事件
const emit=defineEmits<{
    (event:'switch',key:string):void
}>();
//定义切换选项卡事件回调函数
function switchTab(key:string):void{
    emit('switch',key);
    Object.keys(tabChecked.value).map((item:string)=>{
        (tabChecked.value)[item]=false;
    });
    (tabChecked.value)[key]=true;
}
</script>

<style lang="scss" scoped>
$text-size:5.5vw;
$button-height:calc($text-size * 2);
/* 选项按钮样式 */
view{
    font: {
        weight: bold;
        size: $text-size;
    }
    text-align: center;
    height:$button-height;
    line-height:$button-height;
    border: {
        radius: 0;
        bottom: {
            width:calc($text-size / 5);
            style:solid;
            color:white;
        }
    }
}
/* 选项按钮样式-默认 */
.button-default{
    background-color: green;
    color:white;
}
/* 选项按钮样式-点击 */
.button-click{
    background-color:white;
    color:green;
}
</style>
